<template>
  <div class="map">
    <div class="map-wrap">
      <div id="map-item"></div>
    </div>
    <div class="map-city">
      <div class="city-wrap">
        <div class="city-item">
          <div>广州</div>
          <div>广州番禺区洛浦路</div>
        </div>
        <div class="copy-wrap">
          <div class="iconfont icon-fuzhi"></div>
          <div>复制</div>
        </div>
      </div>
      <div class="city-detail">
        <div class="city-detail-tag-wrap">
          <div v-for="item in list" :key="item" class="city-detail-tag">
            <span :class="`iconfont ${item.icon}`"></span>
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div v-for="place in placeList" :key="place.index" class="place-item">
          <span class="place-index">{{ place.id }}</span>
          <div>
            <div class="place-title">{{ place.title }}</div>
            <div class="place-text">{{ place.text }}</div>
          </div>
        </div>
        <div class="meituan">以上由美团提供</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotelMap",
};
</script>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=1EdTowjlaNL1iVsLgy7kGpB6gS9qK7OH&callback=initMap";
  // 全局的方法是挂在window上
  window.initMap = () => {
    var map = new BMapGL.Map("map-item");
    var point = new BMapGL.Point(113.31, 23.04);
    map.centerAndZoom(point, 15);
    var scaleCtrl = new BMapGL.ScaleControl();
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();
    map.addControl(cityCtrl);
    var LocationControl = new BMapGL.LocationControl();
    map.addControl(LocationControl);
  };

  document.body.appendChild(script);
});
const list = [
  { icon: "icon-gongjiao", name: "交通" },
  { icon: "icon-jingdian-01", name: "景点" },
  { icon: "icon-canyinzixun", name: "餐饮" },
  { icon: "icon-gouwu", name: "购物" },
];
const placeList = [
  { id: 1, index: 99, title: "广州白云机场", text: "距离37.7km，驾车约54min" },
  { id: 3, index: 88, title: "广州南站", text: "距离7.3km，驾车约25min" },
  { id: 3, index: 77, title: "洛溪地铁站", text: "距离557m" },
];
</script>
<style scoped>
.map {
  width: 718px;
  background-color: #e8ecf8;
  display: flex;
}
.map-wrap {
  padding: 8px;
}
#map-item {
  width: 373px;
  height: 100%;
}
.map-city {
  width: 321px;
  padding: 8px 8px 8px 0;
}
.city-wrap {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
}
.city-item {
  font-size: 14px;
  color: #333;
  padding: 10px 0 16px 10px;
}
.copy-wrap {
  padding: 10px 16px 16px 0;
  font-size: 14px;
  color: #00aaff;
  text-align: center;
}
.icon-fuzhi {
  font-size: 18px;
}
.city-detail {
  width: 289px;
  background-color: #fff;
  padding: 16px;
  margin-top: 8px;
}
.city-detail-tag-wrap {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.city-detail-tag {
  padding: 5px;
  background-color: #f0f2f8;
  border-radius: 15px;
}
.icon-gongjiao {
  color: #00aaff;
  margin-right: 5px;
}
.icon-jingdian-01 {
  color: #3fd2a1;
  margin-right: 5px;
}
.icon-canyinzixun {
  color: #f58e11;
  margin-right: 5px;
}
.icon-gouwu {
  color: #ff4d6a;
  margin-right: 5px;
}
.place-item {
  display: flex;
  margin-top: 10px;
}
.place-index {
  text-align: center;
  width: 14px;
  height: 14px;
  color: #fff;
  background-color: #00aaff;
  border-radius: 50%;
  margin-right: 5px;
}
.place-title {
  font-size: 14px;
  color: #252626;
}
.place-text {
  font-size: 12px;
  color: #8a9094;
  margin-top: 5px;
}
.meituan {
  font-size: 14px;
  color: #d0d4d7;
  border-top: 1px solid #f4f6f7;
  margin-top: 20px;
  padding-top: 15px;
}
</style>
